<template>
  <div class="businessPro">
    <el-card shadow="never">
      <header-title title="商户商品管理"></header-title>
    </el-card>
    <div class="search">
      <!-- 查询 -->
      <el-row>
        <el-col :span="16">
          <div>
            查询:
            <el-input
              v-model="form.searchName"
              style="width: 30%;margin-right:40px"
              placeholder="可输入商品名称"
              clearable
            ></el-input>选择时间:
            <el-date-picker
              v-model="form.value1"
              type="date"
              @change="onPick"
              style="margin-right:40px"
            ></el-date-picker>
            <el-button type="primary" size="small" @click="onSubmit" style="font-size:14px">查 询</el-button>
          </div>
        </el-col>

        <el-col :span="4">
          <el-button size="small" type="success" @click="creatTomo" style="font-size:14px">生成明天预售商品</el-button>
        </el-col>

        <el-col :span="4">
          <el-button
            size="small"
            type="primary"
            @click="dialogFormVisible = true;isActive=true;addbtn()"
            style="font-size:14px"
          >添 加</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 商品管理弹出框 -->
    <el-dialog
      title="商户商品管理"
      :visible.sync="dialogFormVisible"
      v-if="dialogFormVisible"
      :key="timer"
      width="40%"
    >
      <el-form :model="formdialog" :rules="rules" ref="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth" prop="elmMarketProductId">
          <my-select1
            ref="mySelectBusiness1"
            url="api/v1/backend/elm/market/product/select"
            @selected="mySelectedBusiness1"
          ></my-select1>
        </el-form-item>
        <el-form-item label="成本价格(元)" :label-width="formLabelWidth" prop="costPrice">
          <el-input
            v-model="formdialog.costPrice"
            autocomplete="off"
            style="width:60%"
            @input="xiaonum"
          ></el-input>
        </el-form-item>
        <el-form-item label="销售日期" :label-width="formLabelWidth" prop="saleDate">
          <el-date-picker
            v-model="formdialog.saleDate"
            type="date"
            autocomplete="off"
            @change="onPick2"
            style="width:60%"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="success" @click="submitEdit();" :class="{ showactive: isActive }">编 辑</el-button>
        <el-button type="primary" @click="handleAdd('form');" :class="{ showactive: !isActive }">添 加</el-button>
      </div>
    </el-dialog>

    <!-- 商品列表 -->
    <div class="table">
      <el-row>
        <el-col :span="6">
          <span style="color: #fff;">0</span>
        </el-col>
        <el-col :span="6">
          <p style="padding: 15px 0;">
            商户名称：
            <span style="font-size: 24px;">{{formdialog.businessName}}</span>
          </p>
        </el-col>
        <el-col :span="6">
          <p style="padding: 15px 0;">
            摊位号：
            <span style="font-size: 24px;">{{formdialog.stallName}}</span>
          </p>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <!-- <el-table-column label="商品名称" prop="productName"></el-table-column> -->
        <!-- <el-table-column label="商品图片" prop="productImg">
          <template slot-scope="scope">
            <img :src="scope.row.productImg" alt style="width:50px;height:36px" @click="getimg(scope.row.productImg)" />
          </template>
        </el-table-column>-->
        <el-table-column label="商品名称" prop="productName"></el-table-column>
        <el-table-column label="销售日期" prop="saleDate"></el-table-column>
        <el-table-column label="成本价格(单位：元)" prop="costPrice">
          <template slot-scope="scope">
            {{scope.row.costPrice/100}}
            <span>元</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handledel(scope.$index, scope.row);open()">
              <span style="color:#f7674a;font-size:14px">删除</span>
            </el-button>
            <!-- <el-button size="mini" @click="businessList(scope.row)" type="text" style="color:#3dc2c2;">商户列表</el-button> -->
          </template>
        </el-table-column>
        <div slot="empty">
          <img src="../../assets/blank_tip_page/blank_tip_page.png" alt />
        </div>
      </el-table>

      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="querydata.page"
        :page-sizes="pageSizes"
        :page-size="querydata.perPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      title="商品图片"
      :visible.sync="dialogFormVisibleimg"
      v-if="dialogFormVisibleimg"
      width="33%"
      center
    >
      <div class="dialogDiv">
        <img
          :src="this.imgmax"
          alt
          style="width: 100%;
                height: auto;
                max-width: 100%;
               max-height: 100%;"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MySelect1 from "./select1";
import HeaderTitle from "@/components/HeaderTitle";
export default {
  name: "businessPro",
  components: {
    MySelect1,
    HeaderTitle
  },
  data() {
    return {
      querydata: {
        elmMarketProductId: "",
        productName: "",
        perPage: 10,
        page: 1
      },
      pageSizes: [1, 5, 10, 20],
      total: 20, // 总条数
      tableData: [],
      form: {
        searchName: "",
        value1: new Date()
      },
      formdialog: {
        elmMarketProductId: "",
        businessId: "",
        businessName: "",
        costPrice: "",
        saleDate: "",
        productName: "",
        stallName: ""
      },
      dialogFormVisible: false,
      formLabelWidth: "150px",
      isActive: false,
      id: "",
      timer: "",
      ishidden: true,
      loading: true,
      imgmax: "",
      dialogFormVisibleimg: false,
      rules:{
        costPrice:[{
          required:true,message:"请输入成本价格",trigger:"change"
        },
        {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "价格是整数或两位小数",
            trigger: "change"
          }],
        saleDate:[{
          required:true,message:"请选择销售日期",trigger:"change"
        }],
        elmMarketProductId:[{
          required:true,message:"请选择商品名称",trigger:"change"
        }]
      }
    };
  },
  created() {},
  mounted() {
    // this.querydata.elmMarketProductId = this.$route.query.id;
    this.formdialog.businessId = this.$route.query.businessId;
    this.formdialog.businessName = this.$route.query.businessName;
    this.formdialog.stallName = this.$route.query.stallName;
    this.getbusinessList();
    // this.form.saleDate=new data()
    // console.log(this.querydata.elmMarketProductId);
  },
  methods: {
    getbusinessList() {
      this.$store
        .dispatch("businessPro/getbusinessPro", {
          businessId: this.$route.query.businessId,
          targetDate: this.dateFormat(this.form.value1),
          searchName: this.form.searchName,
          perPage: this.querydata.perPage,
          page: this.querydata.page
        })
        .then(data => {
          // console.log(data);
          this.loading = false;
          this.tableData = data.items;
          this.total = data.total;
        })
        .catch(err => {
          console.log(err);
        });
      this.loading = true;
    },
    handleEdit(index, row) {
      // console.log(index, row);
      (this.formdialog.id = row.id),
        (this.formdialog.elmMarketProductId = row.elmMarketProductId),
        (this.formdialog.businessId = row.businessId),
        (this.formdialog.businessName = row.businessName),
        (this.formdialog.costPrice = row.costPrice),
        (this.formdialog.saleDate = row.saleDate);
    },
    addbtn() {
      //  this.formdialog={}
      this.formdialog.businessId = "";
      this.formdialog.costPrice = "";
      this.formdialog.saleDate = new Date();
    },
    handleAdd(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
      this.formdialog.saleDate = this.dateFormat(this.formdialog.saleDate);
      // (this.formdialog.elmMarketProductId = this.querydata.elmMarketProductId),
      // (this.formdialog.businessId = this.formdialog.businessId * 1),
      this.$store
        .dispatch("businessPro/getbusAdd", {
          businessId: this.$route.query.businessId,
          costPrice: (this.formdialog.costPrice - 0) * 100,
          businessName: this.formdialog.businessName,
          saleDate: this.formdialog.saleDate,
          elmMarketProductId: this.formdialog.elmMarketProductId
        })
        .then(data => {
          if (data) {
            this.getbusinessList();

            this.dialogFormVisible = false;
            this.$message({
              message: "添加成功",
              type: "success"
            });
            // this.timer = new Date().getTime();
          } else if (data == undefined) {
            this.dialogFormVisible = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
        } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },
    open() {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store
            .dispatch("businessPro/getbusDel", {
              id: this.id
            })
            .then(data => {
              // console.log(data);
              if ((this.total - 1) % this.perPage == 0) this.page--;
              this.getbusinessList();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handledel(index, row) {
      // console.log(index, row);
      this.id = row.id;
    },

    dateFormat(time) {
      let date = new Date(time);
      let year = date.getFullYear();

      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

      return year + "-" + month + "-" + day;
    },

    onPick(val) {
      // console.log(this.dateFormat(val));
      // console.log(this.dateFormat(val[1]))
    },
    onPick2(val) {
      // console.log(this.dateFormat(val));
      // console.log(this.dateFormat(val[1]))
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.loading = false;
      this.querydata.perPage = val;
      this.querydata.page = 1;
      this.getbusinessList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.loading = false;
      this.querydata.page = val;
      this.getbusinessList();
    },
    onSubmit() {
      this.getbusinessList();
    },
    mySelectedBusiness1(obj) {
      // console.log(obj);
      this.formdialog.productName = obj.exData.productName;
      this.formdialog.elmMarketProductId = obj.exData.id;
    },
    xiaonum() {
      // console.log(this.formdialog.costPrice.toString().split(".")[1])
      if (this.formdialog.costPrice == null) {
        this.ishidden = true;
      } else if (this.formdialog.costPrice.toString().split(".")[1] == null) {
        this.ishidden = true;
      } else if (
        this.formdialog.costPrice.toString().split(".")[1].length > 2
      ) {
        // alert("小数点后最多两位小数")
        this.ishidden = false;
      } else {
        this.ishidden = true;
      }
    },
    getimg(img) {
      // console.log(img)
      this.imgmax = img;
      this.dialogFormVisibleimg = true;
    },
    creatTomo() {
      this.$store
        .dispatch("businessPro/creatTomo", {
          businessId: this.$route.query.businessId,
          targetDate: this.dateFormat(this.form.value1)
        })
        .then(data => {
          console.log(data);
          if(data==""){
            this.$message({
            type: "success",
            message: "生成预售商品成功!"
          });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-form-item {
  margin-bottom: 17px;
}
.table {
  background: #fff;
  padding: 5px;
  padding-left: 15px;
  margin-bottom: 20px;
}
.search {
  background: #fff;
  padding-left: 15px;
  padding-top: 15px;
  margin-bottom: 20px;
  padding-right: 5px;
  padding-bottom: 15px;
}
.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-right: 10px;
}
.searchbtn {
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}
.showactive,
.hidden {
  display: none;
}
.search ::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
}
.search ::v-deep .el-input__icon {
  line-height: 34px;
}
.dialogDiv {
  height: 430px;
  overflow: auto;
}
</style>
